/**
 * 搜索组件
 */

// 库
import React, { PureComponent } from 'react'
import { RouteComponentProps, withRouter } from 'react-router-dom'
import WingBlank from 'antd-mobile/lib/wing-blank'
// import WhiteSpace from 'antd-mobile/lib/white-space'
import Flex from 'antd-mobile/lib/flex'
import Icon from 'antd-mobile/lib/icon'


// 工具
import { Omit } from '../../tools/Omit'
import { withDefaultProps } from '../../tools/defaultProps'

// 资源
import 'antd-mobile/lib/icon/style/css'
import 'antd-mobile/lib/flex/style/css'
import 'antd-mobile/lib/wing-blank/style/css'
// import 'antd-mobile/lib/white-space/style/css'
import './SearchBar.scss'

/**
 * 全量初始化State
 *
 * @desc
 * 按照最佳实践React的State应该在初始化时全部备齐，如数据不在初始化时获取则初始化为null
 * 保证类型完整
 */
type InitalState = {
  value: string
  displayValue: string
}

/**
 * 不允许外部修改的 State 的 属性列表
 */
type ShadowState = ''

/**
 * 对外导出的State
 */
export type State = Partial<Omit<InitalState, ShadowState>>

/**
 * 默认Props
 */
const defaultProps: DefaultProps = {
  syncbetween: false,
  closeOnBlur: false
}

/**
 * 默认Props类型定义
 */
type DefaultProps = {
  syncbetween: boolean
  closeOnBlur: boolean
}

/**
 * 全量Props类型定义
 */
type Props = {
  syncbetween?: boolean
  closeOnBlur?: boolean
} & ( DefaultProps & React.InputHTMLAttributes<HTMLInputElement> & RouteComponentProps<any>)


/**
 * @class SearchBar
 * @desc 搜索栏
 */
export class SearchBar extends PureComponent<Props, InitalState> {
  readonly state: InitalState = {
    displayValue: this.props.value ? this.props.value + '' : '搜索品牌名、商品',
    value: this.props.value ? this.props.value + '' : '',
  }

  private changeHandle = (evt: React.ChangeEvent<HTMLInputElement>) => {
    this.setState({
      value: evt.target.value
    })
  }

  public render() {
    return (
      <div className="com_searchbar">
        <WingBlank size="lg">
          <Flex className="com_searchbar_container">
            {/* <div className="icon"></div> */}
            <Icon size="sm" type="search" className="com_searchbar_icon" />
            <Flex.Item className="com_searchbar_input_container">
              <input type="search"
                value={this.state.value}
                placeholder={this.state.displayValue}
                onInput={this.changeHandle}
                onChange={this.changeHandle}
                name={this.props.name}
              />
            </Flex.Item>
          </Flex>
        </WingBlank>
      </div>
    )
  }
}

export default withDefaultProps(defaultProps, withRouter(SearchBar))
